<template>
    <div class="checkInput">
        <el-select v-model="value" style="margin-bottom: 10px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <component :is="currentComponent"  :label='label' :comData='comData' @setFormData='setFormData' ref="dynamicType" :classStyle='classStyle'></component>
    </div>
</template>

<script>
    import optionInput from './optionInput.vue'
    import datePicker from './datePicker.vue'
    export default {
        data() {
            return {
                value: 0,
                obj:{},
                options: [{
                    value: 0,
                    label: '选择范围'
                }, {
                    value: 1,
                    label: '动态筛选'
                }],
            }
        },
        props:{
            label:[Array,Number],
            comData: {
                type: Object,
                default: () => {}
            },
            classStyle:{
                type:String,
                default:''
            }
        },
        components: {
            optionInput,
            datePicker,
        },
        methods:{
            setFormData(val) {
                this.obj = val
            },
            changeValue(v,dynamicType,fieldValue){
                this.value = v
                this.$nextTick(()=>{
                    const {getDynamicType,dynamicTypeGetValue} = this.$refs.dynamicType
                    dynamicType ? getDynamicType(dynamicType) : dynamicTypeGetValue(fieldValue)
                })
            }
        },
        computed: {
            currentComponent: function () {
                return this.value === 0 ? datePicker : optionInput
            }
        }
    }
</script>

<style lang="less" scoped>
    /deep/ .el-select {
        width: 100%;
    }
</style>